h2  {
    margin:0; font-size:1.1em; font-style:italic; background-color:white; width:68px;
}

#main_id {
    position:absolute;  /* relative to the screen */
    width:auto;
    margin:0 auto;
    /* top:50px; */
    left:20px;
}

*.parent   {
    position:absolute;
    height:550px;
    width:700px;

    margin-top:5px;
    /*background-color:white;*/
    background-color:#efefef;
    border:2px solid black;
    repeat-y;
}

*.box {
    border:1px solid black;
    background-color:gold;
}

*.line_spacer {
    height:15px;
    border:none!important;
    background:none!important;
    font-size:1px;
    line-height:1px;
}

*.static_inline_auto {
    width:auto;
    border:1px solid fuchsia;
}

*.replaced_inline_shrinkwrapped {
    width:auto;
}
*.replaced_inline_sized {
    width:35px;
}
*.sized_for_replaced {
    width:100px;
    height:40px;
    position:absolute;
    border:1px solid red;
}
*.replaced_inline_100_pct {
    width:100%;
    height:100%;
    border:1px solid blue;
}

/****************************************************/
*.inline_block_sized {
    display:inline-block;
    width:500px;
    background-color:#497fbf;
}
*.inline_block_auto {
    display:inline-block;
    width:auto;
    background-color:#648dc7;
    border:1px solid lime;
}
*.inline_block_100_pct {
    display:inline-block;
    width:100%;
    background-color:#648dc7;
    border:1px solid red;
}

/****************************************************/
*.block_sized {
    width:500px;
    background-color:#497fbf;
}
*.block_auto {
    width:auto;
    background-color:#648dc7;
    border:1px solid lime;
}
*.block_100_pct {
    width:100%;
    background-color:#648dc7;
    border:1px solid red;
}

/****************************************************/
*.table_sized {
    width:300px;
    background-color:#93a9d5;
}
*.table_auto {
    width:auto;
    background-color:#7c9bcf;
    border:1px solid fuchsia;
}
*.table_100_pct {
    width:100%;
    background-color:#aabadd;
    border:1px solid red;
}

*.float_sized {
    float:left;
    width:300px;

    background-color:#d5dcef;
}

*.float_auto {
    float:left;
    width:auto;

    clear:both; /* prevent THIS element from floating on one or both sides of the other element */
    background-color:#c0cbe7;
    border:1px solid fuchsia;
}

*.float_100_pct {
    float:left;
    width:100%;

    clear:both; /* prevent THIS element from floating on one or both sides of the other element */
    background-color:#ebecf6;
    border:1px solid red;
}

*.absolute_boxes_section {
    position:relative;
    /* visibility:visible; */

    margin:0px;
    padding:0px;
    top:0px;

    clear:both; /* prevent THIS element from floating on one or both sides of the other element */
    /*background-color:#feedea;*/
    /* z-index:-1;      <== THIS thing make the box disappear, why?! */
}

*.absolute_boxes_section p {
    border:1px solid yellow;
}

*.absolute_sized {
    position:absolute;  /* for absolute, it's rather critical as to the value of left, right, top, bottom  */
    left:0;
    right:auto;
    top:25px;

    width:300px;

    background-color:#d4ecfb;
}

*.absolute_auto_right_auto {
    position:absolute;
    left:0;
    right:auto;
    top:50px;

    width:auto;

    background-color:#ebf5fc;
    border:1px solid fuchsia;
}

*.absolute_auto {
    position:absolute;

    left:0;
    right:0;    /* offset from ancestor box */
    top:75px;

    width:auto;

    background-color:#bfe2f9;
    border:1px solid lime;
}

*.absolute_100_pct {
    position:absolute;

    left:0;
    right:0;    /* offset from ancestor box */
    top:100px;

    width:100%;

    background-color:#bfe2f9;
    border:1px solid red;
}

